<template>
  <div class="invite-container">
    <n-card title="资源包" size="huge" hoverable>
      <n-alert type="info" :show-icon="false">
        <div class="text-xl">
          1.
          适用于需要快速提升用量级别来获取更高速率峰值的场景。用户可根据实际业务需求购买相应等级包。
        </div>
        <div class="text-xl">2. 等级包需用账户充值余额购买，请保证余额充足。</div>
        <div class="text-xl">3. 专属实例不在此列，如有需求请联系您的专属客户经理。</div>
      </n-alert>

      <n-divider title-placement="center">
        <span>购买资源包</span>
      </n-divider>
      <div class="flex flex-wrap">
        <div class="w-1/3 h-[200px] p-2" v-for="item in 8" @click="selectedLevel = item">
          <div class="flex flex-col border-2 border-slate-600 w-full h-full rounded-lg p-5 hover:border-blue-200" :class="{'border-blue-200': selectedLevel === item}">
            <div class="text-3xl mb-2">等级{{item}}</div>
            <div class="text-gray-300">详情请查看限速文档</div>
            <n-divider />
            <span class="font-bold text-3xl text-blue-300 h-[120px]">￥200</span>
          </div>
        </div>
      </div>
      <n-divider title-placement="center">
        <span>支付方式</span>
      </n-divider>
      <div class="p-5 mb-2 text-xl border-dashed border border-gray-300 rounded-lg">
        余额支付（充值余额：￥0 ）
      </div>
      <div class="p-5 mb-2 text-xl border-dashed border border-gray-300 rounded-lg">
        微信支付
      </div>
      <n-divider title-placement="center">
        <span>提示</span>
      </n-divider>
      <div class="text-lg text-gray-400 mb-5">
        <div>1. 等级包购买成功后立即生效，如需发票开具，请参考开具发票。</div>
        <div>
          2.
          等级包启用后，将在下个月继续有效。到期之后平台将根据您到期前一个月的消费金额来重新评估并调整您的账户用量级别。
        </div>
      </div>
      <div class="text-right">
      <n-button size="large" type="primary" @click="showModal = true">提交订单</n-button>
    </div>
    </n-card>

    <!-- zhif -->
    <PayModel v-model:show="showModal" />
  </div>
</template>
<script setup>
import { ref } from "vue";
import {
  NGradientText,
  NCard,
  NButton,
  NInput,
  NDivider,
  NTabPane,
  NTabs,
  NDataTable,
  useMessage,
  NAlert,
} from "naive-ui";
import PayModel from "@/components/payModel/index.vue";
import { copyToClip } from "@/utils/copy";

const message = useMessage();
const showModal = ref(false);

const selectedLevel = ref(1)


</script>
<style scoped>
.invite-container {
  width: 100%;
  padding: 20px;
}
h1 {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}
</style>
